<template>
    <my-div>
       <my-div day_bg="#f1f1f1" night_bg="rgba(192,97,0,1)" class="bgimgheader">
            <image style="width: 750px;height: 300px;position:absolute;top:0px;" resize='stretch' :src="`root:img/${theme}/wallet/walletbg@2x.png`"></image>
            <div class="head_wraper" style='margin-top:60px;'>
                <div  @click="toggleSidebar">
                    <image style="width: 36px;height: 30px" :src="`root:img/${theme}/head/sidebar@2x.png`"></image>
                </div>
                 <div style="position:absolute;left:280px">
                    <text style="text-align: center;font-size: 36;color:#ffffff;" >AXSwap</text>
                </div>
                <div class="wallet-operate">
                  <div style="display: flex;flex-direction: row;height:88px;align-items:center" @click="change_eye">
                    <image  style="width: 36px;height: 36px"  :src="toggle_eye ? `root:img/${theme}/wallet/keshi@2x.png` : `root:img/${theme}/wallet/bukeshi@2x.png`"></image>
                  </div>
                </div>
            </div>
         </my-div>
        <div class="account">
              <image style="width: 740px;height:250px;position:absolute;left:-26px;top:-10px;" resize='stretch' :src="`root:img/${theme}/wallet/walletsmallbg.png`"></image>
            <div class="account-label" >
              <div class="account-avatar">
                   <image style="100px;height:100px;" :src="avatar" placeholder="root:img/avatar@2x.png"></image>
              </div>
            </div>
            <div class="account-code">
              <my-text day_color="rgba(60,71,98,1)" night_color="#fff" :text="nickname||current_wallet.name" class="account-code-id"></my-text>
              <my-text :text="current_wallet.account_id" class="account-code-sub"></my-text>
            </div>
            <!-- <image class="account-secret" style="width:35px;height:40px;" src=""></image> -->
        </div>
    </my-div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      avatar:'',
      toggle_eye:true,
      nickname:'',

    }
  },
  created() {
    this.nickname = this.current_user.nickname || ''
    let notify=weex.requireModule('notify')
    notify.regist('update_avatar1',(data)=>{
      if(data.avatar) this.avatar = data.avatar
    })
    notify.regist('update_name1',(data)=>{
        this.nickname = data.nickname
    })
    if(!this.current_user.avatar){
      this.update_userinfo()
    }else{
      this.avatar = this.current_user.avatar || 'root:img/avatar@2x.png'
    }
  },
  methods: {
    change_eye(){
      this.toggle_eye = !  this.toggle_eye
      this.$emit('toggle_eye')
    },
    toggleSidebar(){
      const notify = weex.requireModule('notify');
      notify.send('toggle_slider')
    },
    update_userinfo(){
      this.$http.getSilent('wallet/getUserInfoByAccountId',{account_id:this.current_wallet.account_id},(res)=>{
        this.avatar = res.result.avatar
        this.set_current_user(this.current_user)
      })
    },
  }
}
</script>
<style scoped>
.bgimgheader{
    width: 750px;
    position: relative;
    height: 346px;
    z-index: 1;
    margin-bottom: 34px;
}
.head_wraper{
  display: flex; 
  flex-direction: row;
  width:690px;
  margin-left:30px;
  height:90px;
  align-items: center;
  justify-content: space-between;
}
.wallet-operate{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 106px;
  justify-content: space-between;
}
.account{
  width: 690px;
  margin-left: 30px;
  height: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 20px;
  margin-top: -238px;
  padding-top: 40px;
  position: relative;
  z-index: 111;
}
.account-label{
  margin-left: 46px;
  margin-right: 40px;
  padding-right: 46px;
  height: 140px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(233,233,233);
}
.account-avatar{
  width: 100px;
  height: 100px;
}
.account-name{
  font-size: 24px;
  margin-top: 8px;
}
.account-code-id{
  font-size: 36px;
}
.account-code-sub{
  font-size: 20px;
  color: rgb(154,156,164);
  margin-top:24px;
}
.account-secret{
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>